<template>
  <div class="search">
    <!-- -------- 搜索页点击后的详情页 --------- -->
    <div v-if="!isBigSearch">
      <div v-show="!isSearchHot">
        <!-- 搜索框 -->
        <TopSearch v-model="isSearchHot" class="TopSearch">
          <div class="top-search-text">
            <span>{{ kw }}</span>
            <van-icon v-show="kw" class="clear" 
              name="cross" color="#999" size="15"
              @click="clearSearchValue"
            />
          </div>
        </TopSearch>
        <!-- 标题栏 -->
        <van-tabs v-model:active="tabIndex"  color='#f86442' sticky offset-top="64">
          <van-tab title="全部">
            <ContentList v-model="tabIndex" :index="3" :title="`'${kw}' 相关的主播`">
              <AllAnchor :AllUserList="AllUserList"></AllAnchor>
            </ContentList>
            <ContentList v-model="tabIndex" :index="1" :title="`'${kw}' 相关的专辑`">
              <ContentItem 
                v-for="contentItem in AllAlbumList"
                :key="contentItem.albumInfo.id"
                :contentItem="contentItem.albumInfo"
              ></ContentItem>
            </ContentList>
            <ContentList v-model="tabIndex" :index="2" :title="`'${kw}' 相关的声音`">
              <ContentItem
                v-for="contentItem in AllTrackList"
                :key="contentItem.trackInfo.id"
                :contentItem="contentItem.trackInfo"
              ></ContentItem>
            </ContentList>
            <bottom></bottom>
          </van-tab>

          <van-tab title="专辑">
            <Album :kw="kw!"></Album>
            <bottom></bottom>
          </van-tab>

          <van-tab title="声音">
            <sound :kw="kw!"></sound>
          </van-tab>

          <van-tab title="主播">
            <anchor></anchor>
            <bottom></bottom>
          </van-tab>
        </van-tabs>
      </div>
      
      <!-- 搜索关键词热词 -->
      <Search v-model="isSearchHot" v-show="isSearchHot" class="mt-64"></Search>
  </div>

    

    <!-- -------  搜索页主页 ---------- -->
    <div v-else>
      <!-- 大的搜索头部 -->
      <Search v-model="isSearchHot">
        <div class="search-title">
          <router-link to="/home"><img src="../charts/images/logo.png" alt=""></router-link>
          <form action="javascript:;" class="title-form">
            <input type="text" v-model="kw" class="input" placeholder="专辑/声音/主播"/>
            <button @click="onSearch"><van-icon name="search" color="#fff"></van-icon></button>
            <van-icon @click="kw=''" v-show="kw" class="clear" name="cross" color="#999" size="15"/>
          </form>
        </div>
      </Search>
    </div>

    <!-- 回到顶部 -->
    <van-back-top/>
  </div>
</template>

<script setup lang="ts">
import sound from './components/sound.vue'
import { ref } from 'vue';
import anchor from './components/anchor/anchor.vue'
import TopSearch from '../charts/components/TopSearch/TopSearch.vue';
import Search from '../charts/components/Search/Search.vue'
import ContentList from "./components/ContentList/ContentList.vue"
import ContentItem from './components/ContentItem/ContentItem.vue';
import AllAnchor from './components/AllAnchor/AllAnchor.vue'
import Album from './components/Album.vue'
import { onMounted } from 'vue';
import { _getSearchResult } from "../../api/serach/index"
import { AnyObjType } from '../charts/api/chartsApi';
import { useRouter,useRoute } from "vue-router"
import { watch } from 'vue';
import bottom from './components/anchor/bottom.vue'
const $router = useRouter()


/* ------------- 搜索后的详情页 ----------- */
const tabIndex = ref(0); //控制四个标题高亮的索引
const isSearchHot = ref(false);//是否展示实时搜索热词
const isBigSearch = ref(false)//是否展示大搜索页面

/* 全部标题中的数据 */
//专辑列表
const AllAlbumList = ref<AnyObjType[]>([])
//主播列表
const AllTrackList = ref<AnyObjType[]>([])
//声音列表
const AllUserList = ref<AnyObjType[]>([])


//获得搜索的值(kw)
const route=useRoute();
let kw=ref<string>('');

/* 点击大搜索按钮 */
const onSearch = ()=>{
  if(!kw.value.trim()) return;
  let historyList:string[] = JSON.parse(sessionStorage.getItem('history_list')!) || [];
  if(!historyList.some(item=>item==kw.value.trim())){
    historyList.push(kw.value.trim())
    sessionStorage.setItem('history_list',JSON.stringify(historyList))
  }
  $router.push({
    path:`/search/${kw.value.trim()}`
  })
}

/* 监听route变化 */
watch(route,(nval)=>{
  if(nval.params.kw) {
    isBigSearch.value = false;
    isSearchHot.value = false;
    tabIndex.value = 0;
    AllAlbumList.value = [];
    AllTrackList.value = [];
    AllUserList.value = [];
    kw.value = nval.params.kw as string;

    getSearchResult()
  }
  else{
    isBigSearch.value = true;
  }
  
})


/* 点击顶部搜索栏的X图标 */
const clearSearchValue = (e:Event)=>{
  e.stopPropagation()
  kw.value = '';// 清空大搜索页搜索框内容，显示搜索框
  $router.push({
    path:'/search'
  })
}








/* 生命周期 */
onMounted(()=>{
  //获得kw
  kw.value=route.params.kw as string
  !kw.value && (isBigSearch.value = true)
  kw.value && getSearchResult()
 
})

/* 获取搜索详情页数据功能函数 */

const getSearchResult = async ()=>{
  try {
    let res = await _getSearchResult(kw.value)
    if(res.ret == 0) {
      AllAlbumList.value = res.data.albumViews.albums;
      AllTrackList.value = res.data.trackViews.tracks;
      AllUserList.value = res.data.userViews.users;
    }
    
  } catch (error) {
    console.log(error);
    
  }
}


</script>

<style scoped lang="less">
:deep(.van-search__action){
  font-size: 16px;
}
.search{
  padding-top: 64px;
}
.TopSearch{
  position: fixed;
  top: 0px;
}
.mt-64{
  margin-top: -64px;
}

/* 搜索框头部大标题 */
.search-title{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0px 20px 30px;
  img{
    width: 169px;
    height: 38px;
    padding-bottom: 30px;
  }
  .title-form{
    display: flex;
    align-items: center;
    position: relative;
    .clear{
      position: absolute;
      right: 70px;
    }
    .input{
      height: 36px;
      width: 250px;
      background-color: #fff;
      border-radius: 17px 0 0 17px;
      border: 1px solid #f86442;
      font-size: 14px;
      padding: 0 10px;
    }
    button{
      height: 38px;
      width: 60px;
      background-color: #f86442;
      border: 0;
      border-radius: 0 17px 17px 0;
    }
  }
}

/* ------------ 商品详情页面 ---------- */
/* 顶部搜索文本 */
.top-search-text{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 10px;
  width: 130px;
  color: #333;
}

/* 顶部固定导航栏 */
.search-detail-top{
  position: fixed;
}


</style>